<template>
  <div class="zss-login">
    <div class="zss-body-h flex jc">
      <div class="flex login-body">
        <div class="login-bg flex">
          <Form ref="login" :model="loginInfo" :rules="loginRules">
            <FormItem prop="username">
              <Input type="text" v-model="loginInfo.username" placeholder="账号"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="password">
              <Input type="password" password v-model="loginInfo.password" placeholder="密码"></Input>
            </FormItem>
            <Button type="primary" @click="toCheck"><Icon type="md-play"/></Button>
          </Form>
        </div>
        <Modal v-model="qrCodeCheck" title="请滑动验证" footer-hide>
          <canvas id="sliderBlock" width="488"></canvas>
          <canvas id="codeImg" width="488"></canvas>
        </Modal>
        <div class="login-opt">
          <span class="hand" @click="toRegistry">注册</span>
          <span class="pl10 pr10">|</span>
          <span class="hand">忘记密码</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { SlipCheck } from 'slip_check'
import { sysLogin } from 'api/api.ts'
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Login extends Vue {
  private loginInfo = {
    username: '',
    password: ''
  }
  private qrCodeCheck = false
  private qrCodeModule: any = {}
  private loginRules = {
    username: [{ required: true, message: '请输入账号', trigger: 'change' }],
    password: [{ required: true, message: '请输入密码', trigger: 'change' }]
  }
  private toCheck() {
    const form: any = this.$refs['login']
    form.validate((v: boolean) => {
      if (v) {
        this.qrCodeCheck = true
        this.$nextTick(() => {
          this.qrCodeModule = new SlipCheck('sliderBlock', 'codeImg', () => {
            this.toLogin()
          })
          this.qrCodeModule.init()
        })
      }
    })
  }
  // 去登录
  private toLogin() {
    const p = {
      ...this.loginInfo
    }
    sysLogin(p).then((res: Result) => {
      if (res.status) {
        this.$Message.success('登录成功')
        const user = JSON.parse(JSON.stringify(res.data))
        delete user.token
        this.$store.dispatch('userLogin', {
          token: res.data.token,
          user: user
        })
        this.$router.push('/mine')
      } else {
        this.$Message.error(res.msg)
        this.qrCodeCheck = false
      }
    })
  }
  // 去注册
  private toRegistry() {
    this.$router.push('/registry')
  }
}
</script>

<style lang="less">
@import './login.less';
</style>
